<script setup>
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'

let charts = ref()  // 获取 组件实例

onMounted(()=>{
    // 初始化echarts
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        title:{
            text:'男女比例',
            textStyle:{
                color:'#29fcff',    
            },
            left:'40%', 
        },
        xAxis:{
            show:false,min:0,max:100,
        },
        yAxis:{show:false,type:'category'},
        series:[
            {type:'bar',data:[58],barWidth:'20px',z:100,itemStyle:{color:'rgba(4, 91, 214, 0.91)',borderRadius:20}},
            {type:'bar',data:[100],barWidth:'20px',barGap:'-100%',itemStyle:{color:'rgba(252, 92, 140, 0.91)',borderRadius:20}},
        ],
        // 布局配置
        grid:{left:'20%',right:'20%',top:0,bottom:0},
    })
})

</script>

<template>
    <div class="box1">
        <div class="title">
            <p>男女比例</p>
            <img src="/public/img/screen/dataScreen-title.png" alt="">
        </div>
        <div class="sex">
            <div class="man"><img src="/public/img/screen/man.png" alt=""></div>
            <div class="women"><img src="/public/img/screen/woman.png" alt=""></div>
            
        </div>
        <div class="rate"><p>男生58%</p><p>女生42%</p></div>
        <div class="charts" ref="charts"></div>
    </div>
</template>

<style scoped lang="scss">
.box1{
    width: 100%;
    height: 100%;
    background: url('/public/img/screen/dataScreen-main-cb.png') no-repeat;
    background-size: 100% 100%;
    margin: 20px 0;
    color:white;
    font-size: 20px;
    .title{
        margin-left: 20px;
        p{
            
        }
    }
    .sex{
        display: flex;
        justify-content: center;
        .man{
            width: 115px;
            height: 115px;
            margin: 20px;
            background: url('/public/img/screen/man-bg.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .women{
            width: 115px;
            height: 115px;
            margin: 20px;
            background: url('/public/img/screen/woman-bg.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .rate{
        display: flex;
        justify-content: space-between;
        margin: 0 20%;
    }
    .charts{
        width: 100%;
        height: 100px;
    }
}
</style>